piratezon_new/app/pages/site-manager/onboard/edit/[id].vue

<template>
  <div class="admin--showroom-form">
    <div v-if="isLoading" class="admin--loading">데이터를 불러오는 중...</div>
    <form v-else @submit.prevent="handleSubmit" class="admin--form">
      <!-- 전시장명 -->
      <div class="admin--form-group">
        <label class="admin--form-label"
          >전시장명 <span class="admin--required">*</span></label
        >
        <input
          v-model="formData.name"
          type="text"
          class="admin--form-input"
          placeholder="전시장명을 입력하세요"
          required
        />
      </div>

      <!-- 소속명 선택 -->
      <div class="admin--form-group">
        <label class="admin--form-label"
          >소속명 <span class="admin--required">*</span></label
        >
        <select v-model="formData.branch_id" class="admin--form-select" required>
          <option value="">소속 지점을 선택하세요</option>
          <option v-for="branch in branches" :key="branch.id" :value="branch.id">
            {{ branch.name }}
          </option>
        </select>
      </div>

      <!-- 대표번호 -->
      <div class="admin--form-group">
        <label class="admin--form-label"
          >대표번호 <span class="admin--required">*</span></label
        >
        <input
          v-model="formData.phone"
          type="tel"
          class="admin--form-input"
          placeholder="02-1234-5678"
          required
        />
      </div>

      <!-- 주소 -->
      <div class="admin--form-group">
        <label class="admin--form-label"
          >주소 <span class="admin--required">*</span></label
        >
        <input
          v-model="formData.address"
          type="text"
          class="admin--form-input"
          placeholder="주소를 입력하세요"
          required
        />
      </div>

      <!-- 상세주소 -->
      <div class="admin--form-group">
        <label class="admin--form-label">상세주소</label>
        <input
          v-model="formData.detail_address"
          type="text"
          class="admin--form-input"
          placeholder="상세주소를 입력하세요"
        />
      </div>

      <!-- 위도/경도 -->
      <div class="admin--form-group">
        <label class="admin--form-label">위치 좌표</label>
        <div class="admin--coordinate-group">
          <div class="admin--coordinate-item">
            <label>위도</label>
            <input
              v-model.number="formData.latitude"
              type="text"
              step="any"
              class="admin--form-input"
              placeholder="37.5665"
            />
          </div>
          <div class="admin--coordinate-item">
            <label>경도</label>
            <input
              v-model.number="formData.longitude"
              type="text"
              step="any"
              class="admin--form-input"
              placeholder="126.9780"
            />
          </div>
        </div>
      </div>

      <!-- 영업시간 -->
      <div class="admin--form-group">
        <label class="admin--form-label">영업시간</label>
        <textarea
          v-model="formData.business_hours"
          class="admin--form-textarea"
          rows="3"
          placeholder="평일: 09:00 - 18:00&#10;주말: 10:00 - 17:00"
        ></textarea>
      </div>

      <!-- 견적요청 링크 -->
      <div class="admin--form-group">
        <label class="admin--form-label">견적요청 링크</label>
        <input
          v-model="formData.quote_link"
          type="url"
          class="admin--form-input"
          placeholder="https://example.com/quote"
        />
      </div>

      <!-- 시승신청 링크 -->
      <div class="admin--form-group">
        <label class="admin--form-label">시승신청 링크</label>
        <input
          v-model="formData.test_drive_link"
          type="url"
          class="admin--form-input"
          placeholder="https://example.com/test-drive"
        />
      </div>

      <!-- 링크 관리 -->
      <div class="admin--form-group">
        <label class="admin--form-label">관련 링크</label>
        <div class="admin--multi-input-wrapper">
          <div
            v-for="(link, index) in formData.links"
            :key="index"
            class="admin--multi-input-item"
          >
            <input
              v-model="formData.links[index]"
              type="url"
              class="admin--form-input"
              placeholder="https://example.com"
            />
            <button type="button" class="admin--btn-remove" @click="removeLink(index)">
              삭제
            </button>
          </div>
          <button type="button" class="admin--btn-add" @click="addLink">
            + 링크 추가
          </button>
        </div>
      </div>

      <!-- 버튼 영역 -->
      <div class="admin--form-actions">
        <button type="submit" class="admin--btn admin--btn-primary" :disabled="isSaving">
          {{ isSaving ? "저장 중..." : "확인" }}
        </button>
        <button type="button" class="admin--btn admin--btn-secondary" @click="goToList">
          목록
        </button>
      </div>

      <!-- 성공/에러 메시지 -->
      <div v-if="successMessage" class="admin--alert admin--alert-success">
        {{ successMessage }}
      </div>
      <div v-if="errorMessage" class="admin--alert admin--alert-error">
        {{ errorMessage }}
      </div>
    </form>
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import { useRouter, useRoute } from "vue-router";

  definePageMeta({
    layout: "admin",
    middleware: ["auth"],
  });

  const router = useRouter();
  const route = useRoute();
  const { get, put } = useApi();

  const isLoading = ref(true);
  const isSaving = ref(false);
  const successMessage = ref("");
  const errorMessage = ref("");
  const branches = ref([]);

  const formData = ref({
    name: "",
    branch_id: "",
    phone: "",
    address: "",
    detail_address: "",
    latitude: null,
    longitude: null,
    business_hours: "",
    quote_link: "",
    test_drive_link: "",
    links: [],
  });

  // 지점 목록 로드
  const loadBranches = async () => {
    const { data, error } = await get("/branch/list", { params: { per_page: 1000 } });

    if (data?.success && data?.data?.items) {
      branches.value = data.data.items.filter((branch) => branch.is_active == 1);
    }
  };

  // 전시장 데이터 로드
  const loadShowroom = async () => {
    const id = route.params.id;

    const { data, error } = await get(`/showroom/${id}`);

    if (data?.success && data?.data) {
      const showroom = data.data;
      formData.value = {
        name: showroom.name || "",
        branch_id: showroom.branch_id || "",
        phone: showroom.main_phone || "",
        address: showroom.address || "",
        detail_address: showroom.detail_address || "",
        latitude: showroom.latitude || null,
        longitude: showroom.longitude || null,
        business_hours: showroom.business_hours || "",
        quote_link: showroom.quote_link || "",
        test_drive_link: showroom.test_drive_link || "",
        links: showroom.links && showroom.links.length > 0 ? showroom.links : [""],
      };
    }

    isLoading.value = false;
  };

  // 링크 추가
  const addLink = () => {
    formData.value.links.push("");
  };

  // 링크 삭제
  const removeLink = (index) => {
    formData.value.links.splice(index, 1);
  };

  // 폼 제출
  const handleSubmit = async () => {
    successMessage.value = "";
    errorMessage.value = "";

    // 유효성 검사
    if (!formData.value.name) {
      errorMessage.value = "전시장명을 입력하세요.";
      return;
    }

    if (!formData.value.branch_id) {
      errorMessage.value = "소속 지점을 선택하세요.";
      return;
    }

    if (!formData.value.phone) {
      errorMessage.value = "대표번호를 입력하세요.";
      return;
    }

    if (!formData.value.address) {
      errorMessage.value = "주소를 입력하세요.";
      return;
    }

    isSaving.value = true;

    try {
      const id = route.params.id;

      // 빈 링크 제거
      const submitData = {
        ...formData.value,
        links: formData.value.links.filter((link) => link.trim() !== ""),
      };

      const { data, error } = await put(`/showroom/${id}`, submitData);

      if (error || !data?.success) {
        errorMessage.value = error?.message || data?.message || "수정에 실패했습니다.";
      } else {
        successMessage.value = data.message || "전시장이 수정되었습니다.";
        setTimeout(() => {
          router.push("/site-manager/showroom/list");
        }, 1000);
      }
    } catch (error) {
      errorMessage.value = "서버 오류가 발생했습니다.";
      console.error("Save error:", error);
    } finally {
      isSaving.value = false;
    }
  };

  // 목록으로 이동
  const goToList = () => {
    router.push("/site-manager/showroom/list");
  };

  onMounted(async () => {
    await loadBranches();
    await loadShowroom();
  });
</script>

<style scoped>
  .admin--coordinate-group {
    display: flex;
    gap: 16px;
  }

  .admin--coordinate-item {
    flex: 1;
  }

  .admin--coordinate-item label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #666;
  }
</style>